<script setup lang="ts">
import { Graph, Shape } from "@antv/x6";
import { onMounted, ref, watch } from "vue";
import { getTeleport } from "@antv/x6-vue-shape";
import { setupComponents } from "./components";
import { setupContextMenu, type ContextMenuOptions } from "./contextMenu";
import { setupPlugin } from "./plugin";

const TeleportContainer = getTeleport();

const props = defineProps<{
  data?: Object;
  menuOptions?: ContextMenuOptions;
}>();

const graphRef = ref<Graph>();

// TODO: 处理拖动
// let isDragging = ref(false);

const initGraph = () => {
  const graph = new Graph({
    container: document.getElementById("graph-container")!,
    autoResize: true,
    // grid: true,
    grid: {
      visible: true,
      type: "doubleMesh",
      args: [
        {
          color: "#eee", // 主网格线颜色
          thickness: 1 // 主网格线宽度
        },
        {
          color: "#ddd", // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 4 // 主次网格线间隔
        }
      ]
    },
    panning: {
      enabled: true,
      modifiers: "shift"
    },
    mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
      modifiers: "ctrl",
      minScale: 0.5,
      maxScale: 3
    },
    connecting: {
      router: "manhattan",
      connector: {
        name: "rounded",
        args: {
          radius: 8
        }
      },
      anchor: "center",
      connectionPoint: "anchor",
      allowBlank: false,
      snap: {
        radius: 20
      },
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: "#A2B1C3",
              strokeWidth: 2,
              targetMarker: {
                name: "block",
                width: 12,
                height: 8
              }
            }
          },
          tools: [
            {
              name: "edge-editor",
              args: {
                attrs: {
                  backgroundColor: "#EFF4FF"
                }
              }
            }
          ],
          zIndex: 0
        });
      },
      validateConnection({ targetMagnet }) {
        return !!targetMagnet;
      }
    },
    highlighting: {
      magnetAdsorbed: {
        name: "stroke",
        args: {
          attrs: {
            fill: "#5F95FF",
            stroke: "#5F95FF"
          }
        }
      }
    }
  });

  graphRef.value = graph;

  setupComponents();
  setupContextMenu(graph, props.menuOptions);
  setupPlugin(graph);
  // setupKeyboard(graph);
  // setupStencli(graph, document.getElementById("stencil") as any);
};

watch(
  () => props.data,
  (newVal: any, oldVal: any) => {
    if (newVal === "") {
      return;
    }
    if (props.data) {
      graphRef.value?.fromJSON(props.data as any);
    }
  }
);

onMounted(() => {
  initGraph();
});
</script>
<template>
  <div class="editor">
    <div class="editor__graph" id="graph-container"></div>
    <TeleportContainer />
  </div>
</template>
<style lang="scss" scoped>
.editor {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  background: #fff;
  &__stencil {
    // min-width: 400px;
    position: relative;
    border-right: 1px solid #dfe3e8;
    height: 100vh;
    &__btn {
      position: absolute;
      right: -15px;
      top: 20px;
      z-index: 999;
      // transform: translateY(-50%);
    }
  }
  &__graph {
    flex: 1;
    height: 100vh;
    box-shadow: 0 0 10px 1px #e9e9e9;
  }
  &__toolbar {
    border: 1px solid #dfe3e8;
    padding: 5px;
    background-color: #dfe3e8;
    border-radius: 10px;
    width: 200px;
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
</style>
